<template>
  <div class="centralized-control-management">
    <!-- 筛选区域 -->
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="省" prop="province">
        <el-select v-model="ruleForm.province" placeholder="请选择省" clearable>
          <el-option label="广东省" value="guangdong"></el-option>
          <el-option label="湖南省" value="hunan"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select v-model="ruleForm.city" placeholder="请选择市" clearable>
          <el-option label="广州市" value="guangzhou"></el-option>
          <el-option label="深圳市" value="shenzhen"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="district">
        <el-select v-model="ruleForm.district" placeholder="请选择区" clearable>
          <el-option label="天河区" value="tianhe"></el-option>
          <el-option label="越秀区" value="yuexiu"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称" prop="siteName">
        <el-select v-model="ruleForm.siteName" placeholder="请选择站点名称" clearable>
          <el-option label="广州站" value="guangzhou"></el-option>
          <el-option label="深圳站" value="shenzhen"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投运状态" prop="operationStatus">
        <el-select v-model="ruleForm.operationStatus" placeholder="请选择投运状态" clearable>
          <el-option label="已投运" value="1"></el-option>
          <el-option label="未投运" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)">查询</el-button>
        <el-button type="primary" @click="configureSettings">电价配置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <div class="cont">
      <el-table :data="tableData" class="control-table" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
        <el-table-column prop="impactPower" label="撞击功率" align="center"></el-table-column>
        <el-table-column prop="currentPower" label="当前功率" align="center"></el-table-column>
        <el-table-column prop="soc" label="SOC" align="center"></el-table-column>
        <el-table-column prop="lastControlTime" label="上次集控时间" align="center"></el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 电价配置抽屉 -->
    <PriceConfigDrawer v-model:visible="drawerVisible" :selected-sites="selectedRows" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import PriceConfigDrawer from './components/PriceConfigDrawer.vue'
import Pagination from '@/components/Pagination.vue'

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  province: '',
  city: '',
  district: '',
  siteName: '',
  operationStatus: ''
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 这里添加查询逻辑
  fetchTableData()
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 新增选中行存储数组
const selectedRows = ref<any[]>([])

// 表格选择变更事件处理
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 抽屉显示状态控制
const drawerVisible = ref(false)

const configureSettings = () => {
  // 判断是否有选中的行
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要配置的站点')
    return
  }

  // 打开抽屉
  drawerVisible.value = true
  console.log('配置按钮点击', selectedRows.value)
}

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchTableData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchTableData()
}

// 表格数据
const tableData = ref([
  {
    id: '1',
    siteName: '广州站',
    impactPower: '500kW',
    currentPower: '300kW',
    soc: '75%',
    lastControlTime: '2023-05-15 14:30:22'
  },
  {
    id: '2',
    siteName: '深圳站',
    impactPower: '600kW',
    currentPower: '450kW',
    soc: '65%',
    lastControlTime: '2023-05-15 10:15:36'
  },
  {
    id: '3',
    siteName: '东莞站',
    impactPower: '450kW',
    currentPower: '280kW',
    soc: '50%',
    lastControlTime: '2023-05-14 16:42:10'
  }
])

// 获取表格数据的方法
const fetchTableData = () => {
  // 这里模拟从API获取数据
  console.log('获取表格数据', {
    page: currentPage.value,
    pageSize: pageSize.value,
    ...ruleForm
  })
  // 实际项目中会调用API
}
</script>

<style lang="scss" scoped>
.centralized-control-management {
  :deep(.conditions-form) {
    .el-select__wrapper {
      width: 1.6rem;
      height: 0.4rem;
      font-size: 0.14rem;
    }
  }

  .cont {
    background: #fff;
    padding: 0 0.16rem 0.24rem;
    min-height: 79vh;

    :deep(.control-table) {
      width: 100%;
    }
  }

}
</style>
